import styled from 'styled-components'
import type { FC, ReactNode } from 'react'
import MonacoEditor from 'react-monaco-editor'

import './index.scss'
// 定义 Wrap 组件
const Wrap = styled.div`
  width: 300px;
  height: 200px;
  margin: auto;
  margin-top: 10px;
  border-radius: 8px;
`

interface IProps {
  children?: ReactNode
  code?: string
}
const ListCodeView: FC<IProps> = ({ code }) => {
  return (
    <Wrap>
      <MonacoEditor
        width="100%"
        language="javascript"
        value={code}
        theme="vs-dark"
        options={{
          readOnly: true,
          minimap: {
            enabled: false
          },
          lineDecorationsWidth: 0
        }}
      />
    </Wrap>
  )
}

export default ListCodeView
